<%--
  Created by IntelliJ IDEA.
  User: 张洋垠Orange
  Date: 2025/6/3
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<style>
    html{
        height: 100%;
        font-size: 1rem;
    }
    body{
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: linear-gradient(-225deg, #57fffc, #fafcff);
        background-size: 200% 100%;
        animation: loopback 10s infinite linear;
    }
    @keyframes loopback {
        0%{
            background-position: 0 0;
        }
        50%{
            background-position: 100% 0;
        }
        100%{
            background-position: 0 0;
        }
    }
    *,*:after,*:before{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body,#layout,.title-box,.input-box,.go-add{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login-box{
        background-color: rgba(255,255,255,0.8);
        border: 3px solid black;
        width: 600px;
        height: 400px;
        box-shadow: 0 0 30px white;
    }
    .login-box>div{
        margin-top: 2rem;
    }
    .input-box{
        width: 550px;
        flex-direction: column;
        height: 200px;
        /*border: 1px solid black;*/
    }
    .input-box>div{
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    .input-box-chile{
        margin-top: 1.2rem;
    }
    .input-box-chile>input{
        font-size: 1.2rem;
        width: 240px;
        height: 30px;
        border: 3px solid black;
        margin-left: 0.5rem;
        padding-left: 2px;
    }
    .input-box-button-box{
        width: 300px;
        display: flex;
        justify-content: center;
        margin-top: 3rem;
    }
    .input-box-button-box>button{
        font-size: 1rem;
        width: 242px;
        height: 32px;
        border: 3px #fafcff solid;
        background-color: #000000;
        color: #6bc5ff;
        border-radius: 15px;
        transition: 200ms;
    }
    .input-box-button-box>button:hover{
        transform: scale(0.9);
        opacity: 0.8;
    }
</style>
<body>
<div id="layout">
    <div class="login-box">
        <div class="title-box">
            <h1>hello!Admin!</h1>
        </div>
        <div class="input-box">
            <div>
                <div class="input-box-chile"><span>用户名:</span><input type="text" name="admin_name"></div>
                <div class="input-box-chile"><span>密码:</span><input type="password" name="admin_pwd"></div>
            </div>
            <div class="input-box-button-box">
                <button onclick="AdminLogin()"><span style="font-size: 1rem">立即登录</span></button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function AdminLogin() {
        let admin_name=$("input[name='admin_name']").val();
        let admin_pwd=$("input[name='admin_pwd']").val();
        $.ajax( {
            "url"          :  "AdminLoginServlet",
            "type"         :  "post",
            "data"         :  {"admin_name":admin_name,"admin_pwd":admin_pwd},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                let map=JSON.parse(result);

                if(map.LoginResult === "success"){
                    alert("登录成功");
                    window.location.href="adminHome.jsp?adminName="+map.admin.admin_name;
                }else {
                    alert("登录失败");
                    window.location.href=""
                }
            },
            "error":  function() {
            }
        } );
    }
</script>
</html>
